<div data-view="audio" class="view">
<style type="text/css">
.rp {
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    overflow: hidden;
}

.aname {
    font-size: 16px;
}

.ainf {
    font-size: 12px;
}

.rtime {
    font-size: 22px;
    color: #FF0000;
}

.ptime {
    margin-top: 40%;
    font-size: 22px;
    color: #FFFFFF;
}

.rprogress {
    background: url(images/arecord.png) no-repeat center center;
    background-size: 32px 32px;
}

.rschedule {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.progress {
    width: 90%;
    background-color: #666;
    margin: 0 5%;
    border: 1px solid #222;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.schedule {
    width: 8px;
    height: 8px;
    margin: 1px 0;
    background-color: #FFCC33;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.stop {
    width: 72px;
    height: 72px;
    background: url(../com.no5.cordovademo/images/astop.png) center center;
    background-size: 72px 72px;
    margin: auto;
    -webkit-border-radius: 72px;
    border-radius: 72px;
}

.stop:active {
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
}

.iplay {
    display: block;
    background: no-repeat right center url(data:images/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAD9UlEQVR4nO2b3XETMRRGDwzvoYOkg5hRAVkqiKmAdIA7wHSQVECoALsC1gXciV0BTge4gvCwgnHk9d/+WF8m97ztxrlXs8fS1Urym6enJxwd3uZugPMcFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAx3uVuwDGY2XtgCBTAALjc8tEFMAdKYBJC+HOK9nXBm5dwUM7MCmAEXDcMMQVuQwhlV23qC2khZjYAboGrjkLOgFEIYd5RvM6RrSFmdgs80J0MYqyHGFsSuR4S60TJ9vrwCEziZ+YhhGXy/xdU9aWgqjfnW+IsgEKtvkgJiUPUPfUyZsD42DoQ68+Y+p62AG6UhjAZITt6xopq3L9vGf+Gqh6dJX+S6ilKNaRkU8YCGLSVARBjDGLMdS5jbgkkhMQiWyejSGtEG2KsghopKoU++5AV68ZDcrvXYWTH8Pghdz1R6CHpN3MFDPsc02PsYcy1qy0nJ6uQOANKZz+jfcOUmd3H6W1jYo5RcvsqtikbuXtI+kBmBxbwz8DczMZtksdcsz1tOinZhMRxPF2bGh8R4gz4amZLMxu2aEqa8zq2LQs5e0j6EB8bLv6dAz/NrGwyjMWcj3vadjJyCimS60nLeFfAbzO7bfANT3MXLdvSmJxCBsl12VHcL8AyvpkfSpo7bdvJyCkkfQfocv5/Bnw3s/mBs6Y097aFzd7JPcv6T5dv5GtcAr/2TZN7yt0IGSE908k0+RS8FiEvhhd1yKEFUw5YAVBApoe0XQrZwgL4GEIY7pLRU+5G5OwhC57PZgbAsqPYK6rdxUMXC9Npbro8fzJy9pB0qll0FPcOuDhCRl3ubEvwOYWUyXXb5YoZ1X7GqMHSfZq7bNmWxuQUki5XnDdc+n4EPoUQiiabSzFnejKl7TJOY7IJid/iaXJ7fESIFfCNas+9zQNMc05zHnjIPctKx/mrA9egflCJGLd5eDFXukGWdddQYU+95PlDWVE97GXPeS+oivf6saBZCKHoM+8+cvcQ2NyhOwMmfW4SxdgTNs9oZd0tBAEhsRDfJbcvgbIPKTtOnNzlPnECAkPWP8xsTv3ZrJ1v2UfmuKDqGRt5QgjZ9kDWyd5D1iioP1U4P3KzqZYYY5v0om38rpDpIeCHrUFMCPjPEeSE/COetf3SU/i7EEL2GVUdSjXkGfGBfWDzIFsb/q93dRizU2R7yDr+o09R/GfRzsmRrSGvFRcihgsRw4WI4ULEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMf4CVuqCm+17t3sAAAAASUVORK5CYII=);
    background-size: 50px 44px;
    -ms-touch-action: auto;
}
</style>



    <header>
        <div class="nvbt iback" id="back"></div>
        <div class="nvtt">Audio</div>
        <div class="nvbt idoc" id= "openDoc"></div>
    </header>
    <div id="dcontent" class="dcontent">
        <br/>
        <div class="button" id="startRecord">开始录音</div>
        <div class="button" id="startPlay">播放音乐</div>
        <br/>
        <!-- History list -->
        <ul id="history" class="dlist" style="text-align:left;">
            <li id="empty" class="ditem-empty">无历史记录</li>
        </ul>
        <br/>
        <div class="button button-waring" id="cleanHistory">清空历史记录</div>
        <br/>
    </div>
    <div id="output">
        Audio用于管理音频设备，可调用麦克风录制音频文件，也可播放音频文件。
    </div>
    <div id="play" class="rp">
        <div id="ptime" class="ptime">00:00:00/00:00:00</div>
        <br/>
        <div id="progress" class="progress">
            <div id="schedule" class="schedule"></div>
        </div>
        <br/>
        <div class="stop" class="stopPlay"></div>
    </div>
    <div id="record" class="rp">
        <div style="width:100%;height:20%;"></div>
        <div class="rprogress">
            <div class="rschedule"></div>
        </div>
        <br/>
        <div id="rtime" class="rtime">00:00:00</div>
        <br/>
        <div class="stop" onclick="stopRecord();"></div>
    </div>
    </div>
